{% extends 'layout.html' %}
{% load static %}
{% block script%}
<link rel="stylesheet" href="{% static "css/admin_ftp.css" %}">
{% endblock %}
{% block content %}
<ol class="breadcrumb">
    {% for p in path %}
    <li><a href="{% url 'admin_ftp' path=p.path %}">{{ p.name }}</a></li>
    {% endfor %}
    <form id="uploadForm" enctype="multipart/form-data">
        <input id="file-input" name="file" multiple type="file" style="display: none">
    </form>
    <p class="navbar-right">
        <span class="btn btn-success btn-upload" onclick="$('input[id=file-input]').click()">上传
        </span>
    </p>
</ol>
<div class="list-group" style="margin-top: 30px">
    <table class="table table-hover">
        <th>名称</th>
        <th>类型</th>
        <th>大小</th>
        <th>创建时间</th>
        {% for f in files %}
        <tr>
            {% if f.type == 'd' %}
            <td><a href="{% url 'admin_ftp' path=f.path %}">{{f.name}}</a></td>
            <td>目录</td>
            {% else %}
            <td>{{f.name}}</td>
            <td>文件</td>
            {% endif %}
            <td>{{f.size}}</td>
            <td>{{f.create_time}}</td>
        </tr>
        {% endfor %}
    </table>
</div>
<script>
    $('#file-input').change(function(){
        $.ajax({
            url: document.location.href,
            type: 'POST',
            data: new FormData($('#uploadForm')[0]),
            processData: false,
            contentType: false,
            success: function () {
                console.log('upload success');
                window.location.reload()
            },
            fail: function () {
                console.log('upload fail')
            }
        })
    })
</script>
{% endblock %}